<template>
	<!-- 
		软件定制开发:Q949330222
		9年全栈经验
	 -->
	<view style="overflow-x: hidden">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="'height: calc( ' + getMobileInfo.height + 'px + ' + getMobileInfo.top + 'px);'"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view :style="'height: calc( ' + getSystemInfo.safeArea.top + 'px + 44px);'"></view>
		<!-- #endif -->
		<image class="bg" :src="'../../static/bg/' + bg + '.jpg'" mode="scaleToFill"></image>
		<view class="center searchDiv">
			<!-- <fa-icon type="search" size="22" color="#fff"></fa-icon> -->

			<!-- <input @input="cityInput" class="input" type="text" v-model="address" placeholder="请输入城市名,快速查询天气"
				placeholder-style="color:#fff" /> -->
		</view>
		<!-- <scroll-view v-if="isShow_cityScroll" scroll-y="true" class="scroll">
			<view class="scrollItem" v-for="(item,index) in cityScrollList" :key="index" @click="citySelect(index)">
				{{item.adm1+' - '+item.adm2+' - '+item.name}}
			</view>
		</scroll-view> -->

		<view class="center">
			<view class="line"></view>
		</view>
		<view class="center addressDiv">
			<uni-data-picker :localdata="cityDatas" popup-title="请选择城市" @nodeclick="onnodeclick" :clear-icon="false"
				v-model="curCityId"></uni-data-picker>
			<view class="updateTime">{{ weather_now.updatetime }} 更新</view>
			<view class="address" @click="getInfo">
				<!-- <view>{{ city }}</view> -->
				<fa-icon type="rotate-right" size="22" color="#fff" style="margin-left: 10px"></fa-icon>
			</view>
		</view>
		<!-- <view class="center talk_day">{{ talk_day }}</view> -->
		<view class="center wenduDiv">
			<view class="wendu">
				<view class="wendu-test">{{ weather_now.temp }}</view>
				<view class="wendu-icon">℃</view>
			</view>
			<view class="cond_txt">
				<image :src="weather_icon" style="width: 50px; height: 50px" mode=""></image>
				{{ weather_now.condition }}
			</view>
			<view style="display: flex; justify-content: space-between; color: #ffffff; font-size: 24px">
				<view style="font-size: 12px;display: flex;justify-content: center;align-items;align-items:baseline;">
					<view>日出</view>
					<view style="font-size: 18px; margin-left: 5px">{{ formatTime(weather_now.sunRise) }}</view>
				</view>
				<view style="font-size: 12px; display: flex; justify-content: center; align-items: baseline">
					<view>日落</view>
					<view style="font-size: 18px; margin-left: 5px">{{ formatTime(weather_now.sunSet) }}</view>
				</view>
			</view>
		</view>
		<view class="nowinfo">
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">温度(℃)</view>
				<view class="test-val">{{ weather_now.temp }}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">湿度(%)</view>
				<view class="test-val">{{ weather_now.humidity }}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">风向</view>
				<view class="test-val">{{ weather_now.windDir }}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">风力(级)</view>
				<view class="test-val">{{ weather_now.windLevel }}</view>
			</view>
		</view>
		<view class="nowinfoDiv"> </view>

		<view class="maxTitle">现场监控</view>
		<template v-for="item in devices">
			<view class="line"></view>
			<view class="nowinfo">
				<view class="nowinfo-cell" style="text-align: left;padding-left: 5px;">
					<view class="test-desc">设备：{{item.name}}</view>
					<view class="test-val">状态：{{item.status}}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">温度(℃)</view>
					<view class="test-val">{{ item.data[0] }}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">湿度(%)</view>
					<view class="test-val">{{ item.data[1] }}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">光照(Lux)</view>
					<view class="test-val">{{ item.data[3] }}</view>
				</view>
			</view>
		</template>
		<view class="nowinfoDiv"> </view>


		<view class="maxTitle">查看近15日天气</view>
		<view class="line"></view>
		<view class="day7">
			<template v-for="day in weather_history">
				<view class="oneday">
					<view class="">{{ day.predict_date }}</view>
					<view class="">{{ day.temp_day }}~{{ day.temp_night }}℃</view>
					<view class="">
						{{ day.condition_day }}
						<image v-bind:src="'../../static/weather/W' + day.condition_id_day + '.png'"></image>
					</view>
					<view class="">{{ day.wind_dir_day + day.wind_level_day }}级</view>
				</view>
			</template>
		</view>

		<!-- <view class="maxTitle">生活指数</view>
		<view class="line"></view>
		<view class="lifeRowDiv">
			<template v-for="item in lifestyle">
				<view v-if="item.type == '8'" class="lifeRow lifeRow1">
					<view class="imgDiv"><image src="../../static/img/shushidu.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">舒适度 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '2'" class="lifeRow">
					<view class="imgDiv"><image src="../../static/img/xiche.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">洗车 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '3'" class="lifeRow">
					<view class="imgDiv"><image src="../../static/img/chuanyi.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">穿衣 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == 'flu'" class="lifeRow">
					<view class="imgDiv"><image src="../../static/img/ganmao.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">感冒 {{ item.brf }}</view>
						<view class="lifeDesc">{{ item.txt }}</view>
					</view>
				</view>
				<view v-else-if="item.type == 'sport'" class="lifeRow">
					<view class="imgDiv"><image src="../../static/img/yundong.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">运动 {{ item.brf }}</view>
						<view class="lifeDesc">{{ item.txt }}</view>
					</view>
				</view>
				<view v-else-if="item.type == 'uv'" class="lifeRow">
					<view class="imgDiv"><image src="../../static/img/ziwaixian.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">紫外线 {{ item.brf }}</view>
						<view class="lifeDesc">{{ item.txt }}</view>
					</view>
				</view>
				<view v-else-if="item.type == 'air'" class="lifeRow">
					<view class="imgDiv"><image src="../../static/img/kongqizhiliang.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">空气污染 {{ item.brf }}</view>
						<view class="lifeDesc">{{ item.txt }}</view>
					</view>
				</view>
				<view v-else-if="item.type == 'trav'" class="lifeRow">
					<view class="imgDiv"><image src="../../static/img/taiyang.png" mode=""></image></view>
					<view class="info">
						<view class="lifeTitle">晾晒 {{ item.brf }}</view>
						<view class="lifeDesc">{{ item.txt }}</view>
					</view>
				</view>
				<view style="margin: 0px 10px; position: relative"><view class="lifeRowLine"></view></view>
			</template>
		</view> -->

		<view style="height: 20px; width: 100%"></view>
	</view>
</template>

<script>
	import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';

	const db = uniCloud.database();
	const dbCmd = db.command;

	export default {
		components: {
			faIcon
		},
		data() {
			return {
				getSystemInfo: {},
				getMobileInfo: {},
				bg: 1,
				title: 'Hello',
				weather_now: {},
				weather_history: {},
				device_now: {},
				devices: [],
				lifestyle: [],
				city: '',
				weather_day: {},
				talk_day: '',
				location: {},
				address: '',
				weather_icon: '',
				isShow_cityScroll: false,
				cityScrollList: [],
				curCityId: 1325,
				cityDatas: [{
						text: "赣州市",
						value: 1325
					},
					{
						text: "瑞金市",
						value: 1326
					},
					{
						text: "南康区",
						value: 1327
					},
					{
						text: "赣县",
						value: 1328
					},
					{
						text: "信丰县",
						value: 1329
					},
					{
						text: "大余县",
						value: 1330
					},
					{
						text: "上犹县",
						value: 1331
					},
					{
						text: "崇义县",
						value: 1332
					},
					{
						text: "安远县",
						value: 1333
					},
					{
						text: "龙南县",
						value: 1334
					},
					{
						text: "定南县",
						value: 1335
					},
					{
						text: "全南县",
						value: 1336
					},
					{
						text: "宁都县",
						value: 1337
					},
					{
						text: "于都县",
						value: 1338
					},
					{
						text: "兴国县",
						value: 1339
					},
					{
						text: "会昌县",
						value: 1340
					},
					{
						text: "寻乌县",
						value: 1341
					},
					{
						text: "石城县",
						value: 1342
					}
				]
			};
		},
		async onShow() {
			this.bg = Math.round(Math.random() * 3) + 1;
		},
		async onLoad() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.getSystemInfo = res;
				}
			});
			// //#ifdef MP-WEIXIN
			// this.getMobileInfo = uni.getMenuButtonBoundingClientRect();
			// //#endif
			// //#ifdef APP-PLUS
			// this.location = await Helper.App();
			// //#endif
			// //#ifdef H5
			// this.location = await Helper.H5();
			// //#endif
			// //#ifdef MP-WEIXIN
			// this.location = await Helper.WeChat()
			// //#endif
			// this.city = this.location.city
			this.getInfo();

		},
		methods: {
			formatTime(dateString) {
				// 使用Date对象解析字符串
				let date = new Date(dateString);
				// 获取小时和分钟
				let hours = date.getHours(); // 获取小时
				let minutes = date.getMinutes(); // 获取分钟
				// 格式化小时和分钟，确保是两位数
				let formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;

				return formattedTime;
			},
			getInfo() {
				// uni.showLoading();
				// this.$api.weather_now(this.curCityId).then((res) => {
				// 	// res.data = '{"code":0,"data":{"city":{"cityId":285130,"counname":"中国","ianatimezone":"Asia/Shanghai","name":"龙岗区","pname":"广东省","secondaryname":"深圳市","timezone":"8"},"condition":{"condition":"阴","conditionId":"13","humidity":"93","icon":"2","pressure":"1005","realFeel":"28","sunRise":"2024-05-12 05:44:00","sunSet":"2024-05-12 18:55:00","temp":"24","tips":"明天有雨，略微偏热，注意衣物变化。","updatetime":"2024-05-12 20:15:08","uvi":"1","vis":"7600","windDegrees":"0","windDir":"北风","windLevel":"1","windSpeed":"1.11"}}}';
				// 	console.log("weather_now:", res);
				// 	this.weather_now = res.data.data.condition;
				// 	this.city = res.data.data.city.name;

				// 	this.weather_icon = '../../static/icon/' + this.weather_now.icon + '.png';
				// });

				uniCloud.callFunction({
						name: 'getWeatherNow',
						data: {
							cityId: this.curCityId
						}
					})
					.then(res => {
						console.log("weather now is: ", res.result);
						this.weather_now = res.result.data.condition;
						this.city = res.result.data.city.name;

						this.weather_icon = '../../static/weather/W' + this.weather_now.icon + '.png';
					});

				uniCloud.callFunction({
						name: 'getMonitorToken'
					})
					.then(res => {
						console.log(res.result);
						uniCloud.callFunction({
								name: 'getMonitorCurrent',
								data: {
									'token': res.result.data.token
								}
							})
							.then(res => {
								console.log(res.result)

								this.devices = res.result.data.map(device => {
									let tmp = [];
									if ("normal" == device.deviceStatus) {
										// 温度+湿度
										tmp = device.dataItem[0].registerItem;
										// CO2数据
										tmp.push(...device.dataItem[1].registerItem);
										// 光照数据
										tmp.push(...device.dataItem[2].registerItem);
									}
									return {
										name: device.deviceName,
										status: device.deviceStatus,
										data: tmp.map(item => item.data)
									}
								})

								console.log(this.devices);
							});
					});


				let yesterday = new Date();
				yesterday.setDate(yesterday.getDate() - 1);
				db.collection("weather").where({
					city_id: this.curCityId,
					predict_date: dbCmd.gte(yesterday.toISOString().split('T')[0])
				}).get().then((res) => {
					// res 为数据库查询结果
					console.log(res);
					this.weather_history = res.result.data;
					console.log("weather history is: {}", this.weather_history);
				}).catch((e) => {
					console.log(e)
				});

				// uniCloud.callFunction({
				// 		name: 'getWeatherHistory',
				// 		data: {
				// 			cityId: this.curCityId
				// 		}
				// 	})
				// 	.then(res => {
				// 		console.log("weather history is: ", res.result)
				// 		this.weather_history = res.result.data.forecast;
				// 	});


				// this.$api.device_token().then((res) => {
				// 	console.log("now():", Date.now());
				// 	console.log("device_token:", res);
				// 	this.$api.device_now(
				// 		"eyJhbGciOiJIUzI1NiJ9.eyJsb2dpbk5hbWUiOiJoMjQwMTE4Z25zZiIsIm1vZHVsZSI6IkFQSSIsImV4cCI6MTcxNzMxOTkzMywidXNlcklkIjoiMDI5MDc4M2VjYjU5Njk2NjI1OTEwNDA0YTk1NGFhNjEiLCJpYXQiOjE3MTczMTI3MzMsImp0aSI6InRva2VuSWQifQ.BYY6iIbAR8EDCwMKm61QTCDt0tfyjQklo9J0wDk7EYE"
				// 	).then((res) => {
				// 		console.log("device_now:", res);
				// 		let nodeData = res.data.data[0].dataItem[0].registerItem;
				// 		nodeData.push(...res.data.data[0].dataItem[1].registerItem);
				// 		nodeData.push(...res.data.data[0].dataItem[2].registerItem);
				// 		this.device_now = nodeData.map(item => item.data);
				// 		console.log(this.device_now);
				// 	});
				// });

				// let res = JSON.parse(
				// 	'{"code":0,"data":{"city":{"cityId":285130,"counname":"中国","ianatimezone":"Asia/Shanghai","name":"龙岗区","pname":"广东省","secondaryname":"深圳市","timezone":"8"},"condition":{"condition":"阴","conditionId":"13","humidity":"93","icon":"2","pressure":"1005","realFeel":"28","sunRise":"2024-05-12 05:44:00","sunSet":"2024-05-12 18:55:00","temp":"24","tips":"明天有雨，略微偏热，注意衣物变化。","updatetime":"2024-05-12 20:15:08","uvi":"1","vis":"7600","windDegrees":"0","windDir":"北风","windLevel":"1","windSpeed":"1.11"}}}'
				// );
				// this.weather_now = res.data.condition;
				// console.log("weather_now:", res);
				// this.weather_icon = '../../static/icon/' + this.weather_now.icon + '.png';

				// this.$api.weather_day(this.location.longitude + ',' + this.location.latitude).then((res) => {
				// 	console.log("weather_day:"+res.data.data);
				// 	this.weather_day = res.data.data;
				// });
				// this.$api.weather_talk().then((res) => {
				// 	console.log("weather_talk:"+res.data.data);
				// 	this.talk_day = res.data.data;
				// 	uni.hideLoading()
				// });
				// this.$api.weather_life(this.location.longitude + ',' + this.location.latitude).then((res) => {
				// 	console.log("weather_life:"+res.data.data);
				// 	this.lifestyle = res.data.data
				// });
			},
			// cityInput(e) {
			// 	if (this.address) {
			// 		this.isShow_cityScroll = true
			// 		this.$api.weather_city(this.address).then((res) => {
			// 			this.cityScrollList = res.data.data
			// 		});
			// 	} else {
			// 		this.isShow_cityScroll = false
			// 	}

			// },
			// citySelect(index) {
			// 	let info = this.cityScrollList[index]
			// 	this.city = info.name
			// 	this.location.longitude = info.lon
			// 	this.location.latitude = info.lat
			// 	this.isShow_cityScroll = false
			// 	this.address = ''
			// 	this.getInfo()
			// },

			onnodeclick(node) {
				console.log('onnodeclick:', node);
				this.curCityId = node.value;
				this.getInfo();
			}
		}
	};
</script>

<style lang="less">
	// view {
	// 	z-index: 0;
	// }

	/deep/.input-value {
		border: none;

		span {
			font-size: 25px;
			color: white;
		}
	}

	.createby {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		height: 30px;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		padding-bottom: 30px;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
	}

	.center {
		width: 85%;
		margin: 0 auto;
		position: relative;
	}

	.searchDiv {
		position: relative;
		display: flex;
		padding: 5px 0px;
		height: 50px;
		align-items: center;
		color: #ffffff;
		box-sizing: border-box;
		padding-left: 10px;
	}

	.searchDiv>.input {
		outline: 0;
		padding: 5px;
		padding-left: 15px;
		color: #ffffff;
		font-size: 16px;
		width: 80%;
	}

	.scroll {
		position: absolute;
		z-index: 999;
		left: 0;
		right: 0;
		top: 200rpx;
		margin: auto;
		width: 650rpx;
		height: 500rpx;
		background: rgba(255, 255, 255, 0.81);
	}

	.scrollItem {
		color: #333;
		padding: 30rpx 20rpx;
		border-bottom: 2rpx solid #e6e6e6;
	}

	.line {
		position: relative;
	}

	.line::after {
		content: '';
		width: 200%;
		height: 1px;
		position: absolute;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
	}

	.lineCol::after {
		content: '';
		width: 1px;
		height: 200%;
		position: absolute;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
	}

	.lineRow::after {
		content: '';
		width: 200%;
		height: 1px;
		position: absolute;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
	}

	.addressDiv {
		display: flex;
		justify-content: space-between;
		color: #ffffff;
		align-items: center;
		padding: 5px 0px;

		.address {
			font-size: 36px;
			display: flex;
			align-items: center;
		}

		.updateTime {
			font-size: 14px;
		}
	}

	.talk_day {
		color: #ffffff;
		font-size: 14px;
	}

	.wenduDiv {
		padding: 5px 0px;
	}

	.wendu {
		color: #ffffff;
		text-align: center;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		.wendu-test {
			font-size: 88px;
		}

		.wendu-icon {
			font-size: 30px;
			display: inline-block;
			padding-top: 15px;
			padding-left: 10px;
		}
	}

	.cond_txt {
		color: #ffffff;
		margin: auto;
		text-align: center;
		font-size: 24px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.day7 {
		position: relative;
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 13px;
		overflow-x: scroll;
		margin-bottom: 30px;
		width: 100%;

		.oneday {
			view {
				width: 100px;
				padding: 3px 0px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			image {
				width: 30px;
				height: 30px;
			}
		}
	}

	.nowinfoDiv {
		width: 100%;
		margin-bottom: 30px;
	}

	.nowinfo {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 13px;
	}

	.nowinfo-cell {
		flex: 1;
		text-align: center;
		padding: 13px 0px;

		.test-desc {
			margin-bottom: 8px;
			display: inline-block;
		}

		.test-val {
			font-size: 12px;
		}
	}

	.maxTitle {
		position: relative;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 15px;
		text-align: center;
		line-height: 40px;
	}

	.lifeRowDiv {
		position: relative;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 14px;

		.lifeRow {
			padding: 10px 10px 10px 10px;
			display: flex;
			height: 90px;
			box-sizing: border-box;
			position: relative;

			.imgDiv {
				width: 70px;
				height: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;

				image {
					width: 50px;
					height: 50px;
				}
			}

			.info {
				flex: 1 1 auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.lifeTitle {
					font-size: 14px;
				}

				.lifeDesc {
					font-size: 12px;
				}
			}
		}

		.lifeRowLine {
			position: relative;
		}

		.lifeRowLine::after {
			content: '';
			width: 200%;
			height: 1px;
			position: absolute;
			bottom: 0;
			left: 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.25);
			transform: scale(0.5);
			transform-origin: 0 0;
			box-sizing: border-box;
		}
	}
</style>